<template>
	<view class="page-body page-body1">
		<view class="loginpage1" v-if="typeid==1">
			<view class="rq-l1">地球岛</view>
			<view class="rq-l2">开启你的新世界</view>
			<view class="rq-l3">首次登录自动创建新账号</view>
			<view class="rq-l4">
				<image class="rq-l4img" src="/static/image/login/login1.gif"></image>
			</view>
			<view class="rq-l5"><button class="confirm-button " @tap="logintypeid(2)">手机号登录</button></view>
			<view class="rq-l6">
				<view class="rqla rqlb" v-if="ischecked" @click="onischecked">
					<image class="rqla1" src="/static/image/login/g2.png"></image>
				</view>
				<view class="rqla" v-if="!ischecked" @click="onischecked"></view>
				阅读并同意<text class="rq-l6xy" @tap="xieyi('用户服务协议')">用户服务协议</text>、<text class="rq-l6xy"
					@tap="xieyi('隐私协议')">隐私协议</text>
			</view>
		</view>
		<view class="loginpage2" v-if="typeid==2">

			<!-- <view class="rq-back">开启你的新世界</view> -->
			<view class="rq-l99"></view>
			<view style="height: 80rpx;"></view>
			<view class="rq-l8">开启你的新世界</view>
			<view class="rq-l9">首次登录自动创建新账号</view>
			<view class="rq-l10">+86 156****1258</view>
			<view class="rq-l11">中国XX提供认证服务</view>
			<view class="rq-l12">
				<view class="confirm-button" @tap="logintypeid(99)">本机号码一键登录</view>
			</view>
			<view class="rq-l13">
				<view class="confirm-button rqbaise" @tap="logintypeid(3)">其它号码登录</view>
			</view>
			<view class="rq-l18">
				<view class="rqla rqlb" v-if="ischecked == true" @click="onischecked">
					<image class="rqla1" src="/static/image/login/g2.png"></image>
				</view>
				<view class="rqla" v-if="ischecked == false" @click="onischecked"></view>
				阅读并同意<text class="rq-l6xy" @tap="xieyi('用户服务协议')">用户服务协议</text>、<text class="rq-l6xy"
					@tap="xieyi('隐私协议')">隐私协议</text>
			</view>

			<view class="rq-l6-a">
				<titles titlesx="其他登录方式"></titles>
				<view class="rq-l6-2">
					<image class="rq-l6-2img" src="/static/image/login/wxtb.png"></image>
				</view>
				<view class="rq-l6-3">微信登录</view>
			</view>
		</view>
		<view class="loginpage3" v-if="typeid==3">
			<view class="rq-back icon-ion-ios-arrow-left" @tap="logintypeid(2)"></view>
			<view class="rq-l99"></view>
			<view style="height: 80rpx;"></view>
			<view class="rq-l8">开启你的新世界</view>
			<view class="rq-l9">首次登录自动创建新账号</view>
			<view class="rq-3a">
				<view class="rq-3a1">+86</view>
				<input :value="phone" class="input rq-3a2" @input="bindPhoneInput" type="number" placeholder="请输入手机号码" />
				<view :class="`rq-3a3 `+ (phone.length == 11?'rq-3a3x':'')" @tap="bindAuthCodeTap">获取验证码</view>
			</view>
			<input class="cinput" adjust-position="false" auto-blur="true" @blur="blur" @input="codenum" :focus="focus"
				value="code" v-model="code" type="number" maxlength="6" />
			<view class="rq-3b">
				<view v-for="(item,index) in 6" :key="index" @click="codefocus(index)"
					:style='((index == code.length || code.length==6 )&&focus ? "border: 2rpx solid #1195db;":("color: " + codeclolor + ";" ))'>
					{{code[index] && code[index] || ''}}
				</view>
			</view>

			<view :class="'confirm-button '+ (phone.length==11 && code.length==6 ?'':'rqqlanse') " @tap="bindLoginTap">登录
			</view>
			<view class="rq-l18">
				<view class="rqla rqlb" v-if="ischecked" @click="onischecked">
					<image class="rqla1" src="/static/image/login/g2.png"></image>
				</view>
				<view class="rqla" v-if="!ischecked" @click="onischecked"></view>
				阅读并同意<text class="rq-l6xy" @tap="xieyi('用户服务协议')">用户服务协议</text>、<text class="rq-l6xy"
					@tap="xieyi('隐私协议')">隐私协议</text>
			</view>
		</view>
		<view class="loginpage4" v-if="typeid==4">
			<view class="rq-back icon-ion-ios-arrow-left" @tap="logintypeid(98)"></view>

			<view style="height: 80rpx;"></view>
			<view class="rq-4a rq-l97">完善你的资料 <image class="rq-l98" src="/static/image/login/bg2.png"></image>
			</view>
			<view class="rq-4a">让大家更好的了解你</view>
			<view style="height: 30rpx;"></view>
			<view class="rq-4b">
				<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles" file-mediatype="image"
					@select="onuploadimg">
					<!-- <image :src="avatarUrl" class="avatar"></image> -->
				</uni-file-picker>
			</view>
			<view style="height: 30rpx;"></view>
			<view class="rq-4c">
				<view class="rq-4c1">昵称</view>
				<view class="rq-4c2"><input class="rq-4cinp" type="text" v-model="formData.nickname" /></view>
			</view>
			<view class="rq-4c">
				<view class="rq-4c1">生日</view>
				<view class="rq-4c2">
					<picker mode="date" :value="formData.birthday" start="1900-01-01" end="2100-12-31" @change="bindDateChange">
						<view>{{formData.birthday}}</view>
					</picker>
				</view>
			</view>
			<view class="rq-4c">
				<view class="rq-4c1">性别</view>
				<view class="rq-4c3">
					<view :class="`rq-4c3m ` + (formData.gender==1?'rq-4c3xnn':'rq-4c3mnn') " @tap="formData.gender=1">
						<view class="rqicon-nn"></view>
					</view>
					<view :class="`rq-4c3m ` + (formData.gender==2?'rq-4c3xnv':'rq-4c3mnv') " @tap="formData.gender=2">
						<view class="rqicon-nv"></view>
					</view>
				</view>
			</view>
			<view class="rq-4c">
				<view class="rq-4c1">城市</view>
				<view class="rq-4c2">
					<input class="rq-4cinp" type="text" v-model="formData.city" />
				</view>
			</view>
			<view class="rq-4c">
				<view class="rq-4c1">学校</view>
				<view class="rq-4c2">
					<input class="rq-4cinp" type="text" v-model="formData.school" placeholder="填写学校，发现校友" />
				</view>
			</view>
			<view class="rq-4c">
				<view class="confirm-button" @tap="userupload()">确认</view>
			</view>
			<view style="height: 180rpx;"></view>
		</view>


	</view>
</template>

<script>
	import wfc from "../../wfc/client/wfc";
	import titles from "../../components/titles.vue";
	import Config from '../../config';
	import {
		getItem,
		setItem
	} from "../util/storageHelper";
	import ConnectionStatus from "../../wfc/client/connectionStatus";
	import appServerApi from "../../api/appServerApi";

	export default {
		name: 'LoginPage',
		data() {
			return {
				focus: false,
				phone: '',
				code: '',
				ischecked: false,
				typeid: 2,
				verificationCode: ['', '', '', '', '', ''],
				currentIndex: 0,
				uploadimg: {},
				imageStyles: {
					width: 120,
					height: 120,
					border: {
						color: "#ffffff",
						width: 0,
						style: 'dashed',
						radius: '0px'
					}
				},
				formData: {
					nickname: '',
					birthday: '选择你的出生日期',
					gender: 1,
					city: '',
					school: ''
				},
				avatarUrl: '/static/image/login/Ellipse2302.png',
				// 验证码获取秒数
				sec: '20', //这是重新获取验证码的倒计时(可根据需求修改)
				codeCorrect: '666666', //正确的验证码
				verifyShow: false, //是否禁用按钮
			};
		},

		components: {
			titles
		},
		props: {},

		onShow() {
			console.log('login onShow');
			if ((Config.APP_SERVER.indexOf('wildfirechat') >= 0 && Config.IM_SERVER_HOST.indexOf('wildfirechat') === -1) ||
				(Config.APP_SERVER.indexOf('wildfirechat') === -1 && Config.IM_SERVER_HOST.indexOf('wildfirechat') >= 0)) {
				console.error('!!!! 严重错误!!!! Config.APP_SERVER 和 Config.IM_SERVER_HOST要一起修改，不能一个用官方服务，一个用自己部署的服务');
			} else if (Config.IM_SERVER_HOST.indexOf(':') >= 0) {
				console.error('!!!! 严重错误!!!! Config.IM_SERVER_HOST 不能包含端口，只需要 HOST 即可');
			} else if (Config.IM_SERVER_HOST.indexOf('http') >= 0) {
				console.error('!!!! 严重错误!!!! Config.IM_SERVER_HOST 不能包含http，只需要 HOST 即可');
			}
		},
		methods: {
			// 输入验证码
			codenum: function(event) {
				console.log('输入的值', event)
				var that = this
				var code = event.detail.value
				that.code = code
				if (code.length == 6) {
					if (code == that.codeCorrect) {
						that.focus = false
						console.log('验证码正确：', that.code)
						this.bindLoginTap()
					} else {
						that.codeclolor = "#ff0000"
						uni.showToast({
							title: "验证码错误",
							icon: 'none',
						});
						setTimeout(function() {
							that.code = []
							event.detail.value = ""
							that.codeclolor = "#313131"
						}, 1500)
					}
				}
			},
			// 键盘隐藏后设置失去焦点
			blur: function() {
				var that = this
				that.focus = false
			},
			// 点击自定义光标显示键盘
			codefocus: function(e) {
				var that = this
				//if (e == that.code.length) {
				that.focus = true
				//}
			},
			bindDateChange(e) {
				this.formData.birthday = e.detail.value;
			},
			onuploadimg(e) {
				this.uploadimg = e.tempFilePaths[0];
				console.log(this.uploadimg)
				this.avatarUrl = this.uploadimg.path;

			},
			userupload() {
				this.go2ConversationList();
				uni.uploadFile({
					url: 'http://localhost:8887/uploaduser',
					filePath: this.uploadimg,
					name: 'file',
					formData: this.formData,
					header: {
						'content-type': 'multipart/form-data' // 使用multipart/form-data格式
					},
					success: (res) => {
						console.log(res)
						this.go2ConversationList();
					}
				})
			},
			onFocus(index) {
				// 当输入框获得焦点时，更新当前聚焦索引
				this.currentIndex = index;
			},
			handleInput(index, event) {
				const value = event.detail.value;
				if (value.length > 1) {
					this.verificationCode[index] = value.slice(-1);
				} else {
					this.verificationCode[index] = value;
				}
				this.code = this.verificationCode.join('')
				if (this.code.length == 6) {
					this.bindLoginTap()
				}
			},
			onischecked: function() {
				this.ischecked = !this.ischecked;
				console.log(this.ischecked)
			},
			xieyi: function(e) {
				uni.showToast({
					title: e,
					icon: 'none',
				});
			},
			logintypeid: function(e) {
				if (e == 99) {
					if (!this.ischecked) {
						return uni.showToast({
							title: '阅读并同意用户服务协议、隐私协议',
							icon: 'none',
						});
					}
				}
				if (e == 98) {
					this.go2ConversationList();
				}
				this.typeid = e;
			},
			phonelogin: function(e) {
				this.typeid = e;
			},
			bindPhoneInput: function(e) {
				this.phone = e.detail.value;
			},
			bindCodeInput: function(e) {
				this.code = e.detail.value;
			},
			bindLoginTap: function(e) {

				this.login(this.phone, "66666");
				//this.login(this.phone, this.code);
			},

			login(phone, code) {
				if (!this.ischecked) {
					return uni.showToast({
						title: '阅读并同意用户服务协议、隐私协议',
						icon: 'none',
					});
				}
				console.log('login', wfc.getClientId(), Config.getWFCPlatform());
				appServerApi.loginWithAuthCode(phone, code)
					.then(result => {
						this.typeid = 4;
						uni.showToast({
							title: "登录成功",
							icon: 'none',
						});
						console.log('login result', result);
						let userId = result.userId;
						let token = result.token;
						setItem('userId', userId);
						setItem('token', token);
						setTimeout(()=>{
							console.log('login connect', result);
							wfc.connect(userId, token);
						},500);
						

						
					})
					.catch(r => {
						console.log('login failed', r)
						uni.showToast({
							title: r,
							icon: 'none',
						});
					});
			},

			bindAuthCodeTap: function(e) {
				console.log(this.phone);
				this.phone.length
				if (this.phone.length == 11) {
					if (!this.ischecked) {
						return uni.showToast({
							title: '阅读并同意用户服务协议、隐私协议',
							icon: 'none',
						});
					}
					return this.authCode(this.phone);
				}
				uni.showToast({
					title: '手机号码错误',
					icon: 'none',
				});
			},

			authCode(phone) {
				appServerApi.requestAuthCode(phone)
					.then(result => {
						uni.showToast({
							title: '发送验证码成功',
							icon: 'none',
						});
					})
					.catch(reason => {
						uni.showToast({
							title: reason,
							icon: 'none',
						});
					})
			},

			go2ConversationList() {
				uni.switchTab({
					url: '/pages/conversationList/ConversationListPage',
					success: () => {
						console.log('to conversation list success');
					},
					fail: e => {
						console.log('to conversation list error', e);
					},
					complete: () => {
						console.log('switch tab complete')
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.rqla {
		width: 17px;
		height: 17px;
		background-color: #ffffff;
		border-radius: 50%;
		border: 1px solid #999;
		margin-right: 5px;

		.rqla1 {
			width: 12px;
			height: 12px;
		}
	}

	.rqlb {
		border: 1px solid #386BF6;
		background-color: #386BF6;
		display: flex;
		align-items: center;
		justify-content: center;
	}


	.custom-checkbox {
		position: relative;
		display: inline-block;
		width: 20px;
		height: 20px;
	}

	.custom-checkbox input[type="checkbox"] {
		opacity: 0;
		position: absolute;
		cursor: pointer;
	}

	.custom-checkbox::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		/* 设置为圆形 */
		background-color: white;
		border: 1px solid #ccc;
		transition: all 0.3s;
	}

	.custom-checkbox input[type="checkbox"]:checked::before {
		background-color: #4caf50;
		/* 选中时的背景色 */
		border-color: #4caf50;
	}

	.custom-checkbox::after {
		content: "";
		position: absolute;
		display: none;
		left: 6px;
		top: 2px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 3px 3px 0;
		transform: rotate(45deg);
	}

	.custom-checkbox input[type="checkbox"]:checked::after {
		display: block;
	}

	.rq-l97 {
		display: flex;
		align-items: center;
	}

	.rq-l98 {
		width: 26px;
		height: 28px;
		margin-left: 10px;
	}

	.rq-l99 {
		position: absolute;
		top: 0;
		right: 20px;
		width: 188px;
		height: 202px;
		background: url(/static/image/login/bcbg.png);
	}

	.cinput {
		position: fixed;
		left: -100rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.rq-4c {
		margin: 30rpx 0;

		.rq-4c1 {
			font-size: 26rpx;
			color: #999;
		}

		.rq-4c2 {
			font-size: 36rpx;
			color: #000;
			border: 1px solid #E4E4E4;
			border-radius: 10px;
			padding: 10rpx 30rpx;
			margin-top: 10rpx;
			height: 82rpx;
			align-items: center;
			display: flex;

			.rq-4cinp {
				font-size: 36rpx;
				width: 100%;
				color: #000;
			}
		}

		.rq-4c3 {
			margin-top: 10rpx;
			display: flex;

			.rq-4c3m {
				background: #F5F5F5;
				justify-content: space-around;
				align-items: center;
				display: flex;
				width: 184rpx;
				height: 82rpx;
				border-radius: 10px;
			}

			.rq-4c3m:first-child {
				margin-right: 20rpx;
			}

			.rq-4c3mnn {
				color: #386BF6;
			}

			.rq-4c3mnv {
				color: #FF77A4;
			}

			.rq-4c3xnn {
				background: #386BF6;
				color: #fff;
			}

			.rq-4c3xnv {
				background: #FF77A4;
				color: #fff;
			}
		}

	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		object-fit: cover;
		margin-bottom: 10px;
	}

	.rq-4a {
		color: #000;
		font-family: MiSans;
		font-size: 24px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}

	.rq-3b {
		justify-content: space-around;
		align-items: center;
		display: flex;
		margin: 40rpx 0;
	}

	.rq-3b>view {
		text-align: center;
		width: 48px;
		height: 57px;
		background-color: #F5F5F5;
		border-radius: 10rpx;
		font-size: 24px;
		border: 1px solid #f1f1f1;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #000;
		font-family: MiSans;
	}

	.rq-3a {
		width: 100%;
		margin: 80rpx 0 20rpx;
		padding-bottom: 10rpx;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.rq-3a1 {
			width: 72rpx;
			height: 36rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			color: #999;
			background-color: #F5F5F5;
			border-radius: 36rpx;
		}

		.rq-3a2 {
			font-size: 32rpx;
		}

		.rq-3a3 {
			font-size: 28rpx;
			color: #acbeff;
		}

		.rq-3a3x {
			color: #386BF6;
		}
	}


	.rq-l6-a {
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.rq-l6-3 {
		width: 100%;
		text-align: center;
		color: #999999;
	}

	.rq-l6-2 {
		width: 100rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 10rpx auto;
		border: 1px solid #dadada;
		border-radius: 50%;
	}

	.rq-l6-2img {
		width: 66rpx;
		height: 66rpx;
	}

	.rq-l8 {
		color: #000;
		font-family: MiSans;
		font-size: 28px;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
	}


	.rq-l9 {
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #999999;
	}

	.rq-l10 {
		font-size: 56rpx;
		margin-top: 120rpx;
		color: #000;
		text-align: center;
	}

	.rq-l11 {
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #999999;
		text-align: center;
	}

	.rq-l12 {
		margin-top: 20rpx;
	}

	.rq-l13 {
		margin-top: 10px;
	}

	.page-body {
		padding: 40rpx;
		height: 100vh;
	}

	.page-body1 {
		background: #ffffff;
		/* 		background:linear-gradient(#51b5fe, #ffffff); */
		position: relative;
	}

	.rq-l1 {
		margin: 80rpx 0px 20rpx auto;
		padding: 10rpx 30rpx;
		background: #48a2e2;
		border-radius: 10rpx;
		display: inline-block;
		color: #ffffff;
	}

	.rq-l2 {
		margin: 20rpx 0;
		color: #ffffff;
	}

	.rq-l3 {
		margin: 20rpx 0;
		color: #ffffff;
		font-size: 14px;
	}

	.rq-l4 {
		margin: 20rpx 0;
		text-align: center;
	}

	.rq-l4img {
		width: 540rpx;
		height: 540rpx;
		margin: 0 auto;
	}

	.confirm-button {
		border-radius: 10px;
		background: #386BF6;
		height: 46px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFF;
		font-family: MiSans;
		font-size: 16px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.rqbaise {
		border: 1px solid #E4E4E4;
		background: #FFF;
		color: #000000;
	}

	.rqqlanse {
		border-radius: 10px;
		background: rgba(56, 107, 246, 0.30);
	}

	.rq-l6 {
		position: absolute;
		left: 40rpx;
		bottom: 60rpx;
		display: flex;
		align-items: center;
	}

	.rq-l18 {
		margin-top: 20rpx;
		color: #999999;
		display: flex;
		align-items: center;
	}

	.rq-l18 .rq-l6xy {
		color: #3B37DE;
	}

	.login-type-title {
		margin-top: 120rpx;
		font-size: 24px;
		margin-bottom: 50rpx;
	}

	.mobile-container {
		margin-top: 20rpx;
	}

	.mobile-input-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 40px;
	}

	.mobile-input-container input {
		font-size: 14px;
		border-bottom: 1px solid #e0e0e0;
	}

	.mobile-input-container .uni-input-input:focus {
		border-bottom: 1px solid #3f64e4;
	}

	.auth-code-container {
		margin-top: 30rpx;
	}

	.auth-code-input-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 40px;
	}

	.auth-code-input-container input {
		flex: 1;
		margin-right: 5px;
		font-size: 14px;
		border-bottom: 1px solid #e0e0e0;
	}

	.auth-code-input-container .uni-input-input:focus {
		border-bottom: 1px solid #3f64e4;
	}

	.confirm-button {
		margin-top: 40px;
	}
</style>